<template>
  <div class="grids gap15 gridColumns3" style="margin-bottom: 10px">
    <DatePicker v-model="params.year" type="year"></DatePicker>
    <el-select
      collapse-tags
      collapse-tags-tooltip
      :max-collapse-tags="2"
      multiple
      clearable
      v-model="params.status"
      placeholder="请选择订单状态"
      @change="search"
    >
      <el-option
        v-for="(item, index) in tabs"
        :key="index"
        :label="item.name"
        :value="item.value"
      />
    </el-select>
    <courseQuery
      v-model="params.curriculum_id"
      multiple="1"
      @fatherMethods="search"
    ></courseQuery>

    <!-- <el-radio-group v-model="type">
        <el-radio-button label="amount">数量</el-radio-button>
        <el-radio-button label="total">金额</el-radio-button>
      </el-radio-group> -->
  </div>
  <!-- <pie id="1" titleText="订单分析" formatter="{b}：{c}" :size="props.gridHeight-80-35" :seriesData="seriesData" type="annular"></pie> -->

  <el-table
    :data="list"
    :height="props.gridHeight - 105"
    show-summary
    :summary-method="getSummaries"
    class="elTable"
  >
    <el-table-column type="index" label="序号" width="80" />
    <el-table-column prop="name" label="课程名称" />
    <el-table-column
      prop="count"
      label="订单总数量"
      width="120"
      align="right"
    />
    <el-table-column
      label="订单总金额"
      width="120"
      prop="totalAmount"
      align="right"
    >
      <template #default="scope">
        {{ proxy.$utils.formatNumber(scope.row.totalAmount) }}
      </template>
    </el-table-column>
    <el-table-column label="订单状态" width="200">
      <template #default="scope">
        <!-- {{ statusFormat2(scope.row.status) }} -->
        <el-tag
          type="danger"
          v-if="scope.row.status == 1 && scope.row.rejectMsg"
          >已驳回</el-tag
        >
        <el-tag v-else :color="counter.tagBgColor(scope.row.status)">
          <div :style="{ color: counter.tagColor(scope.row.status) }">
            {{ statusFormat2(scope.row.status) }}
          </div>
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
let props = defineProps(["gridHeight"]);

const { proxy } = getCurrentInstance();
let params = ref({
  year: proxy.$utils.dateTimeFormateFn(Date.now(), "year"),
  status: [],
  curriculum_id: "",
});
let tabs = ref([
  { name: "待审核", value: 1 },
  { name: "审核未通过", value: 3 },
  { name: "支付尾款", value: 8 },
  { name: "报名成功", value: 2 },
  { name: "优惠减免", value: 10 },
  // { name: "已退款", value: 4 },
  // { name: "部分退款", value: 9 },
  { name: "已开票", value: 7 },
]);
let type = ref("total");
let list = ref([]);

let seriesData = computed(() => {
  let arr = [];
  list.value.forEach((element) => {
    if (type.value == "amount") {
      arr.push({ name: element.name, value: element.curriculum_amount });
    } else {
      arr.push({ name: element.name, value: element.curriculum_total });
    }
  });
  console.log("arr", arr);
  return arr;
});

let statusFormat = computed(() => {
  if (!params.value.status.length) return "";
  let arr = [];
  params.value.status.forEach((element) => {
    let index = proxy.$utils.findIndexByField(tabs.value, "value", element);
    if (index != -1) arr.push(tabs.value[index].name);
  });
  return arr.toString();
});

function statusFormat2(element) {
  let index = proxy.$utils.findIndexByField(tabs.value, "value", element);
  if (index != -1) return tabs.value[index].name;
  return "";
}

async function search() {
  list.value = await proxy.$apis.curriculumReport(params.value);
  console.log("订单报表", list.value);
}

// 自定义合计方法 - 核心
const getSummaries = ({ columns, data }) => {
  const sums = []; // 用于存储合计行每一列内容的数组
  columns.forEach((column, index) => {
    if (index === 0) {
      // 第一列通常显示"合计"文本
      sums[index] = "合计";
      return;
    }

    // 指定需要计算合计的数值型列
    const numericProps = ["totalAmount"];
    if (numericProps.includes(column.property)) {
      // 1. 提取当前列的所有数值
      const values = data.map((item) => Number(item[column.property]));
      // 2. 检查是否所有值都是有效数字，然后求和
      if (values.every((value) => !isNaN(value))) {
        const total = values.reduce((prev, curr) => prev + curr, 0);
        // 3. 格式化：保留两位小数并使用千分位分隔符
        sums[index] = proxy.$utils.formatNumber(total);
      } else {
        sums[index] = "N/A";
      }
    }

    const nums = ["count"];
    if (nums.includes(column.property)) {
      // 1. 提取当前列的所有数值
      const values = data.map((item) => Number(item[column.property]));
      // 2. 检查是否所有值都是有效数字，然后求和
      if (values.every((value) => !isNaN(value))) {
        const total = values.reduce((prev, curr) => prev + curr, 0);
        // 3. 格式化：保留两位小数并使用千分位分隔符
        sums[index] = proxy.$utils.formatNumber(total);
      } else {
        sums[index] = "N/A";
      }
    }
  });
  return sums;
};

watch(
  () => params.value.year,
  (newValue, oldValue) => {
    if (newValue) search();
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped></style>
